/* 所有参数 */
:root {
  --linethick: 1px;
  --linewidth: 2em;
}

.process_diagram{font-family: Tahoma,Verdana,Arial,sans-serif;}

/* 节点样式 */
.process_diagram li > div { background-color:#fff; color:#333; border-style:solid; border-color:#555; text-align:left;border-radius: 8px; position: relative;}
.process_diagram li > div:hover{background-color: #e1f3ff;color:#000;}

/* 节点间连线 */
.process_diagram li:before,
.process_diagram li:after,
.process_diagram ul:before,
.process_diagram ul:after,
.process_diagram div:before,
.process_diagram div:after {border-style:dashed; border-color:#555}

/* 调试连接线路 */
/* .process_diagram div:before,
.process_diagram div:after {border-color:#0aa217;}
.process_diagram ul:before,
.process_diagram ul:after {border-color:#ff0000;} */

/* 图定位 */
.process_diagram,
.process_diagram ol,
.process_diagram ul,
.process_diagram li {margin:0 auto; padding:0; display:block; list-style:none; text-align:center; vertical-align: middle;}

.process_diagram li {position:relative;}

.process_diagram,
.process_diagram ol {display:table; width:100%; border-collapse:collapse; }

.process_diagram > li,
.process_diagram ol > li {display:table-cell; }

.process_diagram > li,
.process_diagram ol > li,
.process_diagram ul > li {padding:.3em 0} /*值越大，上下间隙越大*/

/* 在所有uls的前面和后面都要冲刺 */
.process_diagram ul {position:relative; padding:0 var(--linewidth);}
.process_diagram ul:before,
.process_diagram ul:after {position:absolute; content:""; top:50%; width: var(--linewidth); display:block; border-width:var(--linethick) 0 0; }
.process_diagram ul:before {left:0;}
.process_diagram ul:after {right:0;}

/* 画出连接的竖线 */
.process_diagram ul > li:after,
.process_diagram ul > li:before {position:absolute; content:""; top:0; bottom:0; width:var(--linewidth); height:100%; display:block;}
.process_diagram ul > li:before {left:0; border-width:0 0 0 var(--linethick);}
.process_diagram ul > li:after {right:0; border-width:0 var(--linethick) 0 0;}

/* 纠正ul中第一个和最后一个li-item的横线长度和位置 */
.process_diagram ul > li:first-child:before,
.process_diagram ul > li:first-child:after {top:50%; bottom:auto; height:50%; }
.process_diagram ul > li:last-child:before,
.process_diagram ul > li:last-child:after {top:0; bottom:auto; height:50%;}

/* 划左划右划 */
.process_diagram li > div {position:relative; margin:0 var(--linewidth); padding: .7em; border-width:var(--linethick); }
.process_diagram li > div:before,
.process_diagram li > div:after {content:""; top:50%; width:var(--linewidth); position:absolute; border-width:var(--linethick) 0 0; height:50%;}
.process_diagram li > div:after {right: calc(0em - var(--linewidth)); margin-right: calc(0px - var(--linethick));}
.process_diagram li > div:before {left: calc(0em - var(--linewidth)); margin-left: calc(0px - var(--linethick));}
.process_diagram li:last-child > div:after,
.process_diagram li:last-child > div:before {top:0; border-width: 0 0 var(--linethick);}

/* 删除第一个/最后一个节点的虚线，保持空白和填充 */
.process_diagram > li:first-child > div:before,
.process_diagram > li:first-child > ul:before,
.process_diagram > li:first-child > ul > li:before,
.process_diagram > li:first-child > ul > li > div:first-child:before,
.process_diagram > li:first-child > ul > li > ol > li:first-child > div:before,
.process_diagram > li:last-child > div:after,
.process_diagram > li:last-child > ul:after {
  border:0;
}

/* 删除两个破折号 */
ol.process_diagram > li > div:after,
.process_diagram ol > li > div:after,
ol.process_diagram > li > ul:after,
.process_diagram ol > li > ul:after {display:none}
ol.process_diagram > li > div,
.process_diagram ol > li > div {margin-right: 0;}
ol.process_diagram > li > ul,
.process_diagram ol > li > ul {padding-right: 0;}

/* 最后的破折号不是双破折号，需要恢复 */
ol.process_diagram > li:last-child > div:after,
.process_diagram ol > li:last-child > div:after,
ol.process_diagram > li:last-child > ul:after,
.process_diagram ol > li:last-child > ul:after {display:block;}
ol.process_diagram > li:last-child > div,
.process_diagram ol > li:last-child > div {margin-right: var(--linewidth);}
ol.process_diagram > li:last-child > ul,
.process_diagram ol > li:last-child > ul {padding-right: var(--linewidth); }

/*开始结束*/
.process_diagram .start{background-color: #cbffcb;border-color: #00d853;color: #06a744;text-align: center;}
.process_diagram .end{background-color: #ffe0cb;border-color: #d86500;color: #a74406;text-align: center;}
 #flow-box{min-height:100px;position: relative;padding-top: 15px; padding-bottom: 15px;}

body .flow-icon{position: absolute;right:-1px;bottom:-1px;height: 18px;line-height: 19px; font-size: 11px; display: inline-block; padding: 0 6px; border-top-left-radius: 8px; border-bottom-right-radius: 8px;color:#333;border:1px solid #333;}